<template>
    <div class="app-container">

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['vote:myvote:add']"
          >新增投票</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['system:role:edit']"
          >修改</el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>
        </el-col>
<!--        <el-col :span="1.5">-->
<!--          <el-button-->
<!--            type="warning"-->
<!--            icon="el-icon-download"-->
<!--            size="mini"-->
<!--            @click="handleExport"-->
<!--            v-hasPermi="['system:post:export']"-->
<!--          >导出</el-button>-->
<!--        </el-col>-->
      </el-row>

      <el-table v-loading="loading" :data="subjectList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="主题编号" prop="subjectId" width="120" />
        <el-table-column label="主题名称" prop="description" :show-overflow-tooltip="true" width="150" />
        <el-table-column label="主题状态" prop="status" :formatter="voteStatusFormat" width="100"/>
        <el-table-column label="发起时间" align="center" prop="startTime" width="180" >
          <template slot-scope="scope">
            <span>{{ scope.row.startTime | dateTimeFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="截止时间" align="center" prop="cutOffTime" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.cutOffTime | dateTimeFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否匿名" :formatter="yesNoFormat" prop="anonymous" width="200" />

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">

            <el-button
              size="mini"
              type="text"
              icon="el-icon-circle-check"
              @click="handleStart(scope.row)"
              v-if="scope.row.status === '2'"
            >立即开始</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-circle-check"
              @click="handleCutOff(scope.row)"
              v-if="scope.row.status === '3'"
            >立即截止</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-circle-check"
              @click="handleCutOff(scope.row)"
              v-if="scope.row.status === '4'"
            >查看结果</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 新建投票向导 -->
      <el-dialog :title="title" :visible.sync="voteGuide" width="1200px" append-to-body>
        <vote-guide @on-result="resultHandle" :subject-id="subId"></vote-guide>
      </el-dialog>

    </div>
</template>

<script>
    import VoteGuide from "../guide/index";
    import {listVote, delSubject,startSubject} from '@/api/vote/vote';
    export default {
      name: "index",
      components: {VoteGuide},
      created() {
        this.getList();
        this.getDicts("vote_dict_status").then(response => {
          this.voteStatusOption = response.data;
          });
        this.getDicts("sys_yes_no").then(response => {
          this.yesNoOption = response.data;
        });
      },
      data() {
        return {
          subjectList: [],
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            orderByColumn: 'status',
            isAsc: 'asc',
          },
          total: 0,
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          status: undefined,
          //传递给子组件的属性
          subId: undefined,
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          voteGuide: false,
          // 状态数据字典
          statusOptions: [],
          // 表单
          form: {},
          // 状态
          voteStatusOption: [],
          //
          yesNoOption: [],
        }
      },
      methods: {
        /** 多选框被选中 */
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.subjectId);
          this.status = selection.map(item => item.status);
          this.single = selection.length != 1;
          this.multiple = !selection.length;
        },
        /** 查找列表 */
        getList() {
          this.loading = true;
          listVote(this.queryParams).then(response => {
            this.subjectList = response.data.rows;
            this.total = response.data.total;
            this.loading = false;

          });
        },
        voteStatusFormat(row, cloumn) {
          return this.selectDictLabel(this.voteStatusOption, row.status);
        },
        yesNoFormat(row, cloumn) {
          return this.selectDictLabel(this.yesNoOption, row.anonymous)
        },
        /** 点击修改按钮 */
        handleUpdate() {
          if(this.status > '2'){
            this.msgError("只能更新未开始的投票");
            return;
          }
          this.title = '更新投票';
          this.subId = this.ids[0];
          this.voteGuide = true;
        },

        /** 新增投票 */
        handleAdd() {
          this.voteGuide = true;
          this.title = '新增投票向导';
          this.subId = undefined;
        },
        /** 删除 */
        handleDelete(row) {
          const subjectIds = row.subjectId || this.ids;
          this.$confirm('是否确认删除主题编号为"' + subjectIds + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delSubject(subjectIds);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(e => {
          });
        },
        /** 立即截止 */
        handleCutOff(data) {

        },
        /**
         * 立即开始
         */
        handleStart(row) {
          console.log(row);
          let status = row.status;
          if(status > '2') {
            this.msgError("只能启动未开始的投票");
            return;
          }
          if(row.cutOffTime < new Date()) {
            this.msgError("截止时间小于当前时间");
            return;
          }
          let subjectId = row.subjectId
          this.$confirm('是否确认立即启动编号为"' + subjectId + '"的投票?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return startSubject(subjectId);
          }).then(() => {
            this.getList();
            this.msgSuccess("启动成功");
          }).catch(e => {
          });
        },
        submitForm() {

        },

        cancel() {

        },
        resultHandle(result) {
          if(result) {
            this.msgSuccess("成功");
            this.getList();
            this.voteGuide = false;
          }else {
            this.msgError("失败");
          }


        }
      }
    }
</script>

<style scoped>

</style>
